<template>
  <div class="car-carstatus">
    <!-- 头部导航栏 -->
    <van-nav-bar
      class="header"
      title="购物车"
      right-text="编辑"
      right-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <van-icon name="wap-home-o" color=" #2e2f30" size="21px" slot="left" />
    </van-nav-bar>

    <!-- 复选框 -->
    <div class="checkbox">
      <van-checkbox v-model="checked" icon-size="16px"></van-checkbox>
      <div style="margin-left:10px;font-size:15px;color:#191a1b">商城承担运费</div>
    </div>
    <div class="shoppinglist">
      <div class="list">
        <van-checkbox v-model="checked" icon-size="16px"></van-checkbox>
        <div>
          <img src="../../assets/image/1.webp" alt />
        </div>
        <div class="introduce">
          <div class="text">【深圳】时尚箱包饰品货源厂家直供 , 抢先布局包饰集合店市场 , 箱包投资 , 市场需求大,生意好</div>
          <div class="price">
            <span style="color:#c03131;font-size:15px;">￥128</span>
         <div style="color: #bdc0c5">
            <span style="font-size:15px">x&nbsp;</span>
            <span style="font-size:12px">2</span></div>

          </div>
        </div>
      </div>
    </div>


        <div class="shoppinglist">
      <div class="list">
        <van-checkbox v-model="checked" icon-size="16px"></van-checkbox>
        <div>
          <img src="../../assets/image/1.webp" alt />
        </div>
        <div class="introduce">
          <div class="text">【深圳】时尚箱包饰品货源厂家直供 , 抢先布局包饰集合店市场 , 箱包投资 , 市场需求大,生意好</div>
          <div class="price">
                <span style="color:#c03131;font-size:15px;">￥128</span>
         <div style="color: #bdc0c5">
            <span style="font-size:15px">x&nbsp;</span>
            <span style="font-size:12px">2</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="count">
     <div class="left">
        <van-checkbox v-model="checked" icon-size="16px"></van-checkbox>
      <span class="text1">全选</span>
     </div>
      <div class="right" @click="goto">结算</div>
    </div>
  <footera></footera>
  </div>

</template>
<script>
import footera from '@/components/Footer'

export default {
components:{
  footera
},
  data() {
    return {
      checked: false
    };
  },
  methods: {
    goto(){
      this.$router.push("/order/list")
    },
    onClickLeft() {
      // console.log()
      this.$router.push('/')
      
    },
    onClickRight() {
      this.$router.push('/car/edit')
    }
  }
};
</script>
<style lang="less" scoped>
.car-carstatus {
  // padding: 0 12px;
  background: #f7f7f7;
  .circle {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 1px solid gray;
  }
  .header {
    
    height: 44px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
  }
  .checkbox {
    padding: 0 12px;
    background: #fff;
    display: flex;
    align-items: center;
    height: 44px;
  }
  .list {
    margin-top: 1px;
    height: 123px;
    // box-sizing:border-box
    display: flex;
    background: #fff;
    align-items: center;
    // margin-left: 10px;

    padding: 0 12px;
    img {
      height: 95px;
      margin-left: 10px;
      margin-right:12px;
    }
  }
  .van-nav-bar__text {
    text-align: center;
    line-height: 35px;
    color: black;
  }
  .text {
    font-size: 15px;
    width: 208px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .introduce {
    height: 95px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .price {
    display: flex;
    justify-content: space-between;
  }
  .shoopinglist {
    padding: 0 12px;
  }.count{
    height:49px;
    background: #fff;
    position: fixed;
    bottom: 49px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 10px;

  }.left{
    display: flex;
    align-items: center;
  }.text1{
    margin-left: 10px;
    color: #797d82;
    font-size: 15px;
  }
  .right{
    width: 105px;
    font-size: 16px;
    background-color: #bdc0c5;
    color: #fff;
    height: 100%;
    line-height: 49px;
    text-align: center
  }.van-nav-bar__left{
    line-height: 35px;
  }.van-icon{
    vertical-align:top
  }.van-nav-bar__text{
    font-size:15px;
  }.van-icon-success{
 
  }
}
</style>